<template>
    <link :href="`./highlight.js/styles/${jsonTheme}.css`" type="text/css" rel="stylesheet">
    <a-config-provider :locale="locale" size="medium" global>
        <a-layout id="app" :class="Constant.mode === 'desktop' ? 'desktop' : ''">
            <!-- 顶部菜单栏 -->
            <a-layout-header id="header" @click="closeNotification">
                <div class="left">
                    <div class="logo">{{ $t('app.name') }}</div>
                    <!-- 索引服务器选择 -->
                    <a-select v-model="urlId" :placeholder="$t('app.linkPlaceholder')" size="small" allow-search
                              allow-clear
                              @change="selectUrl" class="url-select" :loading="urlSelectLoading || loading"
                              :show-extra-options="true">
                        <a-option v-for="url in urls" :key="url.id" :label="url.name" :value="url.id"/>
                        <template #empty>
                            <div style="padding: 6px 0; text-align: center;">
                                <a-button type="primary" @click="selectUrl('add')">{{ $t('common.operation.add') }}
                                </a-button>
                            </div>
                        </template>
                        <template #footer>
                            <div style="padding: 6px 0; text-align: center;">
                                <a-button type="primary" @click="selectUrl('add')">{{ $t('common.operation.add') }}
                                </a-button>
                            </div>
                        </template>
                    </a-select>
                    <!-- 刷新按钮 -->
                    <a-button class="refresh" @click="refresh()" :disabled="loading || !urlId || urlId === ''">{{
                            $t('common.operation.refresh')
                        }}
                    </a-button>
                </div>
                <div class="right">
                    <!-- 各种信息弹框 -->
                    <info class-name="menu-item" :disabled="loading"/>
                    <!-- 通知中心 -->
                    <a-button class="menu-item" type="text" status="normal" :disabled="loading"
                              @click.stop="openNotification()">
                        <a-badge :count="hasRead ? 0 : 1" dot>
                            <icon-notification/>
                        </a-badge>
                    </a-button>
                    <!-- 主题切换 -->
                    <a-button class="menu-item" @click="switchDarkColors()" type="text" status="normal">
                        <icon-moon :size="16" v-if="isDark"/>
                        <icon-sun :size="16" v-else/>
                    </a-button>
                    <!-- 多语言切换 -->
                    <a-dropdown @select="languageCommand" trigger="click">
                        <a-button class="menu-item" type="text" status="normal">
                            <icon-language :size="16"/>
                        </a-button>
                        <template #content>
                            <a-doption value="zhCn">中文</a-doption>
                            <a-doption value="enUs">English</a-doption>
                        </template>
                    </a-dropdown>
                    <!-- 版本 -->
                    <a-dropdown @select="versionCommand">
                        <a-button class="menu-item" type="text" status="normal" :disabled="loading">{{
                                Constant.version
                            }}
                        </a-button>
                        <template #content>
                            <a-doption value="feedback">{{ $t('app.feedback') }}</a-doption>
                            <a-doption value="log">{{ $t('app.updateRecord') }}</a-doption>
                            <a-doption value="update" v-if="Constant.mode === 'desktop'">检查更新</a-doption>
                            <a-doption value="about">{{ $t('app.about') }}</a-doption>
                        </template>
                    </a-dropdown>
                </div>
            </a-layout-header>
            <!-- 主页面 -->
            <a-layout id="main">
                <a-layout-sider :collapsed="collapsed" :width="150" :collapsed-width="50">
                    <a-menu v-model:collapsed="collapsed" v-model:selected-keys="selectedKeys" show-collapse-button>
                        <a-menu-item :key="PageNameEnum.HOME">
                            <template #icon>
                                <icon-home/>
                            </template>
                            {{ $t('menu.home') }}
                        </a-menu-item>
                        <a-menu-item :key="PageNameEnum.DATA_BROWSER">
                            <template #icon>
                                <icon-apps/>
                            </template>
                            {{ $t('menu.dataBrowser') }}
                        </a-menu-item>
                        <a-menu-item :key="PageNameEnum.BASE_SEARCH">
                            <template #icon>
                                <icon-search/>
                            </template>
                            {{ $t('menu.baseSearch') }}
                        </a-menu-item>
                        <a-menu-item :key="PageNameEnum.SENIOR_SEARCH">
                            <template #icon>
                                <icon-filter/>
                            </template>
                            {{ $t('menu.seniorSearch') }}
                        </a-menu-item>
                        <a-menu-item :key="PageNameEnum.SETTING">
                            <template #icon>
                                <icon-settings/>
                            </template>
                            {{ $t('menu.setting') }}
                        </a-menu-item>
                    </a-menu>
                </a-layout-sider>
                <!-- 内容-->
                <a-layout-content>
                    <a-spin :loading="loading" :tip="text">
                        <home v-show="selectedKeys[0] === PageNameEnum.HOME"></home>
                        <data-browse v-show="selectedKeys[0] === PageNameEnum.DATA_BROWSER"></data-browse>
                        <base-search v-show="selectedKeys[0] === PageNameEnum.BASE_SEARCH"></base-search>
                        <senior-search v-show="selectedKeys[0] === PageNameEnum.SENIOR_SEARCH"></senior-search>
                        <setting v-show="selectedKeys[0] === PageNameEnum.SETTING"></setting>
                    </a-spin>
                </a-layout-content>
            </a-layout>
        </a-layout>
        <!-- 保存或新增URL弹窗 -->
        <save-or-update-url/>
        <!-- 索引管理 -->
        <index-manage/>
        <!-- 版本更新 -->
        <version-update v-model:visible="updateDialog"/>
        <!-- 欢迎新用户 -->
        <a-modal v-model:visible="newDialog" :title="$t('app.welcome')" class="es-dialog" mask-closable render-to-body
                 draggable top="5vh" width="600px">
            <a-scrollbar height="calc(80vh - 54px)">
                <setting-about v-if="newDialog"/>
            </a-scrollbar>
        </a-modal>
        <!-- 问题反馈 -->
        <a-modal v-model:visible="feedbackDialog" :title="$t('app.feedback')" top="25vh" :close-on-click-modal="false"
                 render-to-body draggable unmount-on-close>
            <feedback-module v-if="feedbackDialog"/>
        </a-modal>
        <!-- 通知管理 -->
        <notification-manage v-model="notificationDrawer"/>
    </a-config-provider>
</template>

<script lang="ts">
// 引入状态管理
import useUrlStore from "@/store/UrlStore";
import useIndexStore from '@/store/IndexStore';
import useSettingStore from "@/store/SettingStore";
import useLoadingStore from "@/store/LoadingStore";
import useNotificationStore from "@/store/NotificationStore";
import {useGlobalStore} from "@/store/GlobalStore";
// 引入框架
import {defineAsyncComponent, defineComponent} from 'vue';
import {mapState} from "pinia";
import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
import zhCn from '@arco-design/web-vue/es/locale/lang/zh-cn';
// 模块
import Info from '@/module/info/index.vue';
// 页面
import Home from '@/page/home/index.vue';
// 插件
import emitter from '@/plugins/mitt';
// 枚举
import MessageEventEnum from "@/enumeration/MessageEventEnum";
import LocalStorageKeyEnum from "@/enumeration/LocalStorageKeyEnum";
import PageNameEnum from "@/enumeration/PageNameEnum";
// 常量
import Constant from '@/global/Constant'
// 工具类
import Optional from "@/utils/Optional";
import Assert from "@/utils/Assert";
import {
    applicationLaunch,
    lodisStrategyContext,
    usePageJumpEvent,
    useUrlEditEvent,
    useUrlSelectEvent,
    versionManage,
} from "@/global/BeanFactory";
import {useBaseSearchSettingStore} from "@/store/setting/BaseSearchSetting";
import MessageUtil from "@/utils/MessageUtil";

export default defineComponent({
    components: {
        // 页面
        Home,
        DataBrowse: defineAsyncComponent(() => import('@/page/data-browse/index.vue')),
        BaseSearch: defineAsyncComponent(() => import('@/page/base-search/index.vue')),
        SeniorSearch: defineAsyncComponent(() => import('@/page/senior-search/index.vue')),
        Setting: defineAsyncComponent(() => import('@/page/setting/index.vue')),
        // 组件
        Info,
        SettingAbout: defineAsyncComponent(() => import("@/page/setting/components/About.vue")),
        VersionUpdate: defineAsyncComponent(() => import("@/module/version-update/index.vue")),
        FeedbackModule: defineAsyncComponent(() => import("@/module/Feedback/index.vue")),
        SaveOrUpdateUrl: defineAsyncComponent(() => import("@/module/SaveOrUpdateUrl/index.vue")),
        IndexManage: defineAsyncComponent(() => import('@/module/index-manage/index.vue')),
        NotificationManage: defineAsyncComponent(() => import('@/module/NotificationManage/index.vue')),
    },
    data: () => {
        return {
            urlId: undefined as number | string | undefined,
            locale: zhCn,
            Constant,
            updateDialog: false,
            newDialog: false,
            feedbackDialog: false,
            collapsed: true,
            selectedKeys: new Array<PageNameEnum>(),
            // 窗口操作展示
            urlSelectLoading: true,
            notificationDrawer: false,
            PageNameEnum,
            // 图标
        };
    },
    computed: {
        ...mapState(useGlobalStore, ['isDark']),
        ...mapState(useUrlStore, ['urls', 'url']),
        ...mapState(useIndexStore, ['name', 'active_shards', 'total_shards', 'status']),
        ...mapState(useSettingStore, ['instance']),
        ...mapState(useLoadingStore, ['loading', 'text']),
        ...mapState(useNotificationStore, ['hasRead']),
        jsonTheme() {
            if (this.isDark) {
                return Optional.ofNullable(this.instance.jsonThemeByDark).orElse('atom-one-dark');
            } else {
                return Optional.ofNullable(this.instance.jsonThemeByLight).orElse('github');
            }
        }
    },
    watch: {
        url() {
            this.urlId = this.url?.id!;
        },
        selectedKeys(newValue: any[]) {
            emitter.emit(MessageEventEnum.PAGE_ACTIVE, newValue[0]);
        },
        urlId(newValue) {
            if (newValue && typeof newValue === 'number') {
                lodisStrategyContext.getStrategy().set(LocalStorageKeyEnum.LAST_URL, newValue + '');
            }
        }
    },
    created() {
        // 初始化基础搜索设置
        useBaseSearchSettingStore().init()
                .then(() => console.log("初始化基础搜索设置成功"))
                .catch(e => MessageUtil.error("初始化基础搜索设置失败", e));
        applicationLaunch.register(async () => {
            console.log('开始执行应用启动后任务');
            // 刷新索引列表
            useUrlStore().reset(() => {
                // url渲染成功
                this.urlSelectLoading = false;
                // utools/vscode第一次进入事件
                let code = sessionStorage.getItem('action');
                console.log('当前的code：', code)
                if (code && code !== 'application') {
                    let id = parseInt(code);
                    if (Number.isInteger(id)) {
                        this.selectUrl(id);
                    }
                } else {
                    // 如果是utils，但是从应用进来，或者不是utils（因为只有utils存在action）
                    // 如果展示历史
                    if (useSettingStore().getLastUrl) {
                        lodisStrategyContext.getStrategy().get<string>(LocalStorageKeyEnum.LAST_URL)
                                .then(value => {
                                    if (value) {
                                        let id = parseInt(value);
                                        if (Number.isInteger(id)) {
                                            this.selectUrl(id);
                                        }
                                    }
                                });
                    }
                }
                // 删除sessionStorage
                sessionStorage.removeItem('action');
                // vscode事件
                window.addEventListener('message', event => {
                    const message = event.data;
                    if (message['type'] === 'url-open') {
                        let id = parseInt(message['content']);
                        if (Number.isInteger(id)) {
                            this.selectUrl(id);
                        }
                    }
                });
            });
            // 未完全退出事件
            useUrlSelectEvent.on(urlId => this.selectUrl(urlId === 0 ? '' : urlId));

            // 版本更新处理
            switch (versionManage.checkBasicUpdate()) {
                case 1:
                    this.newDialog = true;
                    break;
                case 2:
                    this.updateDialog = true;
                    break;
            }
            await versionManage.execUpdate();

            this.selectMenu(useSettingStore().getDefaultPage);

        });

        // 国际化
        let language = useSettingStore().getLanguage;
        if (language === 'zh') {
            this.locale = zhCn;
        } else if (language === 'en') {
            this.locale = enUS;
        }

        // 执行页面跳转事件
        usePageJumpEvent.on((page: PageNameEnum) => {
            this.selectMenu(page);
        });

        // 执行窗口刷新事件
        emitter.on(MessageEventEnum.REFRESH_URL, () => {
            this.refresh();
        });

        // 打开通知中心
        emitter.on(MessageEventEnum.OPEN_NOTIFICATION_MANAGE, () => {
            this.openNotification()
        });

        if (Constant.platform === 'vscode') {
            // vscode需要实现主题自适应
            let theme = document.body.className;
            let isDark = false
            if (theme === 'vscode-light') {
                // 浅色主题
                isDark = false;
            } else if (theme === 'vscode-dark') {
                // 黑夜主题
                isDark = true;
            }
            if (this.isDark !== isDark) {
                this.switchDarkColors();
            }
        } else {
            if (this.isDark) {
                // 设置为暗黑主题
                document.body.setAttribute('arco-theme', 'dark');
            } else {
                // 恢复亮色主题
                document.body.removeAttribute('arco-theme');
            }
        }
    },
    methods: {
        switchDarkColors() {
            useGlobalStore().switchDarkColors()
        },
        async selectUrl(value: any) {
            // 新增，打开新增面板
            if (value === 'add') {
                this.urlId = undefined;
                useUrlEditEvent.emit();
                return;
            }
            // 清空链接
            if (value === '') {
                // 清空链接选择
                useUrlStore().clear();
                // 清空索引信息
                useIndexStore().clear();
                // 发哦送清空事件
                emitter.emit(MessageEventEnum.URL_UPDATE);
                return
            }
            // 选择链接
            Assert.isTrue(useUrlStore().choose(value as number), this.$t('app.urlUnFind'));
            // 索引刷新
            await useIndexStore().reset();
            // 发送url连接事件
            emitter.emit(MessageEventEnum.URL_UPDATE);
            // 选择链接后判断自动全屏
            if (useSettingStore().getAutoFullScreen) {
                this.collapsed = true;
            }

        },
        async refresh() {
            await useIndexStore().reset();
            emitter.emit(MessageEventEnum.URL_REFRESH)
        },
        selectMenu(index: PageNameEnum) {
            // 切换active
            this.selectedKeys = [index];
        },
        languageCommand(command: any) {
            useSettingStore().setLanguage(command);
            this.$i18n.locale = command;
            if (command === 'zh') {
                this.locale = zhCn;
            } else if (command === 'en') {
                this.locale = enUS;
            }
        },
        versionCommand(command: any) {
            switch (command) {
                case 'about':
                    this.selectMenu(PageNameEnum.SETTING);
                    emitter.emit(MessageEventEnum.PAGE_SETTING_ACTIVE, 'about');
                    break;
                case 'log':
                    this.selectMenu(PageNameEnum.SETTING);
                    emitter.emit(MessageEventEnum.PAGE_SETTING_ACTIVE, 'update');
                    break;
                case 'update':
                    alert('检查更新')
                    break;
                case 'feedback':
                    this.feedbackDialog = true;
                    break;
            }
        },
        openNotification() {
            this.notificationDrawer = true;
            useNotificationStore().read();
        },
        closeNotification() {
            this.notificationDrawer = false;
        }
    },
});
</script>

<style lang="less">
.app-feedback {
    width: calc(100vw - 40px);
    height: calc(100vh - 58px - 60px);
    border: none;
}
</style>
